<template>
  <div>
    <van-tabbar route v-model="active" active-color="#fecb1c" inactive-color="#bfbfbf">
      <van-tabbar-item replace to="/index">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon[0].active : icon[0].inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/board">
        <span>宠物寄养</span>
        <template #icon="props"> <img :src="props.active ? icon[1].active : icon[1].inactive" /> </template
      ></van-tabbar-item>
      <van-tabbar-item replace to="/order">
        <span>订单</span>
        <template #icon="props"> <img :src="props.active ? icon[2].active : icon[2].inactive" /> </template
      ></van-tabbar-item>
      <van-tabbar-item replace to="/me">
        <span>我的</span>
        <template #icon="props"> <img :src="props.active ? icon[3].active : icon[3].inactive" /> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      icon: [
        {
          active: require('../assets/img/sy1.png'),
          inactive: require('../assets/img/sy.png'),
        },
        {
          active: require('../assets/img/jy1.png'),
          inactive: require('../assets/img/jy.png'),
        },
        {
          active: require('../assets/img/dd1.png'),
          inactive: require('../assets/img/dd.png'),
        },
        {
          active: require('../assets/img/wd1.png'),
          inactive: require('../assets/img/wd.png'),
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped></style>
